<template>
	<div class="usercomment">
		<div class="usercomment-top">
			<p>用户评论</p>
		</div>
		<div class="usercomment-count">
			<ul class="usercomment-list">
				<li class="usercomment-item">
					<div class="usercomment-item-top">
						<p>
							<span class="star">☆☆☆☆☆</span>
							<span class="username">宋*碧  2018-01-14</span>
						</p>
					</div>
					<p>不得不感叹，古代人民的聪明与智慧，千人千面成就一大奇迹。对于学历史的人来说，来这里会有一种莫名的仪式感~文物古迹会以自己的方式向世人展现自己曾经存在的样子，虽然天挺冷的，但人还是挺多的。西安站有直达的客车，景点有导游（可拼，也可不拼~讲的东西以科普为主吧，且人很多，会感觉是有复读机在耳边一直响😢，所以要谨慎）可按照一到三号顺序参观，了解下古代陵墓选址的风水、秦代军事与社会阶级等的知识也是很好的。ps,三五好友一起，边看边聊是个不错的选择（可能某个兵马俑就是其中一人的前世也说不定~\(≧▽≦)/~）</p>
					<div class="more">
						<span class="iconfont iconjiantouarrow486"></span>
					</div>
					<div class="usercomment-imglist">
						<img src="http://img1.qunarzz.com/piao/fusion/1801/19/d1a06e3b7b59a702.jpg_228x168_00f83e01.jpg" alt=""><img src="http://img1.qunarzz.com/piao/fusion/1801/19/d1a06e3b7b59a702.jpg_228x168_00f83e01.jpg" alt=""><img src="http://img1.qunarzz.com/piao/fusion/1801/19/d1a06e3b7b59a702.jpg_228x168_00f83e01.jpg" alt=""><img src="http://img1.qunarzz.com/piao/fusion/1801/19/d1a06e3b7b59a702.jpg_228x168_00f83e01.jpg" alt="">
					</div>
				</li>
				<li class="usercomment-item">
					<div class="usercomment-item-top">
						<p>
							<span class="star">☆☆☆☆☆</span>
							<span class="username">宋*碧  2018-01-14</span>
						</p>
					</div>
					<p>不得不感叹，古代人民的聪明与智慧，千人千面成就一大奇迹。对于学历史的人来说，来这里会有一种莫名的仪式感~文物古迹会以自己的方式向世人展现自己曾经存在的样子，虽然天挺冷的，但人还是挺多的。西安站有直达的客车，景点有导游（可拼，也可不拼~讲的东西以科普为主吧，且人很多，会感觉是有复读机在耳边一直响😢，所以要谨慎）可按照一到三号顺序参观，了解下古代陵墓选址的风水、秦代军事与社会阶级等的知识也是很好的。ps,三五好友一起，边看边聊是个不错的选择（可能某个兵马俑就是其中一人的前世也说不定~\(≧▽≦)/~）</p>
					<div class="more">
						<span class="iconfont iconjiantouarrow486"></span>
					</div>
					<div class="usercomment-imglist">
						<img src="http://img1.qunarzz.com/piao/fusion/1801/19/d1a06e3b7b59a702.jpg_228x168_00f83e01.jpg" alt=""><img src="http://img1.qunarzz.com/piao/fusion/1801/19/d1a06e3b7b59a702.jpg_228x168_00f83e01.jpg" alt=""><img src="http://img1.qunarzz.com/piao/fusion/1801/19/d1a06e3b7b59a702.jpg_228x168_00f83e01.jpg" alt=""><img src="http://img1.qunarzz.com/piao/fusion/1801/19/d1a06e3b7b59a702.jpg_228x168_00f83e01.jpg" alt="">
					</div>
				</li>
			</ul>
		</div>
		<baidu-map class="map" style="display: flex; flex-direction: column" center="陕西">
            <bm-view style="width: 100%; height:100px; flex: 1"></bm-view>
            <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
            <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
            <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
            <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
        </baidu-map>
	</div>
</template>
<script>
	import Vue from 'vue'
	import BMap from 'BMap'
    import BaiduMap from 'vue-baidu-map'
  	Vue.use(BaiduMap, {
 	   ak: 'GLfaRGby96FxViIShXB3awO0LOwCg2YY'
  	});
	export default{
        
	}
</script>
<style>
	.map {
        width: 100%;
        height: 300px;
    }
	.usercomment{
		background-color: #fff;
		margin-bottom: .2rem;
		position: relative;
	}
	.usercomment:before{
		content: " ";
	    position: absolute;
	    top: .33rem;
	    left: .2rem;
	    width: .06rem;
	    height: .25rem;
	    background: #1ba9ba;
	    border-radius: .04rem;
	}
	.usercomment-top p{
	    padding: 0 .2rem;
	    height: .88rem;
	    background: #fff;
	    color: #333;
	    font-size: .3rem;
	    line-height: .88rem;
	    text-indent: .2rem;
	}
	.usercomment-item{
	    padding: .1rem .2rem .3rem .2rem;
	    position: relative;
	}
	.usercomment-item:before{
		content:"";
		overflow: hidden;
   	 	position: absolute;
		border-top: 1px solid #e0e0e0;
		left: 0;
	    width: 100%;
	    height: 1p class=""x;
	}
	.usercomment-item-top{
		line-height: .6rem;
		font-size: .28em;
	}
	.usercomment-item-top p{
		overflow: hidden;
	}
	.usercomment-item-top p span{
		font-size: .24rem;
	}
	.star{
		float:left;
	}
	.username{
		float:right;
	}
	.usercomment-item>p{
		word-break: break-all;
	    word-wrap: break-word;
	    line-height: .42rem;
	    font-size: .26rem;
	    color: #616161;
	    height: 105px;
    	overflow: hidden;
	}
	.usercomment-imglist img{
		width: 31%;
		margin-bottom: .1rem;
		margin-left: .07rem;
   		margin-right: .07rem;
	}
	.more{
		text-align: center;
		font-size: .28rem;
		line-height: .6rem;
	}
</style>